<template>
  <div>
    <el-row>

      <el-col :span="3" style="margin-left: 2%">
        <el-button plain  @click="store.show = true"><i class="ri-quill-pen-line" />&nbsp;create note</el-button>
      </el-col>

      <el-col :span="3">
        <el-button plain><i class="ri-star-line" />&nbsp;star note</el-button>
      </el-col>

      <el-col :span="3">
        <el-button plain><i class="ri-close-circle-line" />&nbsp;delete note</el-button>
      </el-col>

      <el-col :span="4">
        <el-button plain><i class="ri-delete-bin-2-line" />&nbsp;waste paper basket</el-button>
      </el-col>

      <el-col :span="4">
        <el-input v-model="inputSearch" placeholder="点击进行笔记搜索..." :prefix-icon="Search"/>
      </el-col>

      <el-col :span="6" style="margin-left: 2%">
        <el-select v-model="rank" placeholder="Select">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-col>

    </el-row>
  </div>

</template>

<script setup>
import {Search} from "@element-plus/icons-vue";
import {ref} from "vue";
import {NoteInputCardStore} from "@/stores/counter";
import NoteInputCard from "@/components/Note/noteInputCard.vue";

// 搜索框
let inputSearch = ref("");
// 选择框
let rank = ref("");
const options = [
    {value: 'rank for createTime', label: 'rank for createTime'},
    {value: 'rank for updateTime', label: 'rank for updateTime'},
    {value: 'rank for star', label: 'rank for star'}
]
// 创建笔记
let store = NoteInputCardStore()

</script>

<style scoped>

</style>
